быстрый просмотр / Поиск по тегам / Русский клуб Joomla http://joomclub.net/tag/быстрый просмотр/ ru tena2000@mail.ru tena2000@mail.ru Alto CMS v.1.1.13 «Быстрый просмотр» товаров для Joomshopping http://joomclub.net/t/63/ http://joomclub.net/blog/shop/63.html seoelle@gmail.com Многие, наверное, замечали такую прикольную фишку в топовых интернет-магазинах, как возможность быстрого просмотра товара (превью) в категории магазина без перехода в карточку товара.

Это может быть очень удобно для покупателей, ведь не нужно переходить на другую страницу чтобы узнать больше о товаре. Покупатель сможет рассматривать детально ассортимент продукции непосредственно в категории.

Для того, чтобы реализовать это в магазине JoomShopping, нам потребуются файлы шаблона, а для всплывающего окна будем использовать fancybox.

Итак, приступим к пошаговой реализации:

1. Загружаем fancybox  (ссылка прямая!)

2. Из архива достаем:   

  • jquery.fancybox.pack.js кидаем в /templates/ваш_шаблон/js/     
  • jquery.fancybox.css и картинки (blank.gif, fancybox_loading.gif, fancybox_sprite.png) в /templates/ваш_шаблон/css/  

(в принципе кидать вы можете куда угодно, хоть в корень, только помните про пути :-))

3. Если шаблоны Joomshoppinga не переопределены, то переопределяем.

Папку /components/com_jshopping/templates/default/ переименовать в com_jshopping  и положить в /templates/ваш_шаблон/html/* (это требуется сделать, чтобы после обновления компонента не потерять наши правки в шаблонах)

4. Создаем файл js.js, с таким содержимым

jQuery(document).ready(function(){ var ajlinks = jQuery('.vip-module a'); jQuery(ajlinks).each(function(idx,el){ var oldhref = jQuery(el).attr('href'); jQuery(el).attr('href', oldhref+'?ajcom=shop'); }); jQuery(ajlinks).fancybox({ maxWidth: 800, maxHeight: 600, fitToView: false, width: '70%', height: '70%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none' }); });

5.  Теперь идем в index.php вашего шаблона, подключаем скрипты в <head></head>

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.fancybox.pack.js" type="text/javascript"></script> <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/js.js" type="text/javascript"></script> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/jquery.fancybox.css" type="text/css" /> 

После закрывающегося тега </head> вставляем

<?php  if (JRequest::getVar('ajcom')) { ?>    <jdoc:include type="message" />    <jdoc:include type="component" /> <?php } else { ?>

В самом конце перед </html>

<?php } ?>

На этом работу с index.php закончили.

6. Идем в /templates/шаблон/html/com_jshopping/product/product_default.php и в самом начале пишем условие

<?php  $tmpl = JRequest::getVar("ajcom");        if ($tmpl =="shop") { ?> /* здесь вы можете вынести только картинку, цену, описание, "купить" или на ваш выбор - что необходимо показать во всплывающем окне */ <?php } else { ?> /*тут вся страница товара как обычно */ <?php } ?>

Идем в /templates/шаблон/html/com_jshopping/list_products/product.php и в удобное место вставляем

<div class="vip-module">   <a href="<?php print $product->product_link?>" class="ajlinks" data-fancybox-type="iframe">Быстрый просмотр</a> </div>

На этом все. Вам лишь останется стилизовать ссылку «Быстрый просмотр», может быть сделать ее кнопкой — все это уже на ваш вкус.

Результат в дефолтном исполнении - 

222.png

Этот способ немного отличается от ранее предложенного на форуме, тем что не будет ссылок с окончание ?tmpl=component в теле документа, которые являются дублями карточки товара.


Также выпущен плагин «Быстрый просмотр» для Joomshopping. О всех возможностях и условиях покупки можно ознакомиться здесь - http://joomext.ru/plugin-joomshopping-product-quick-view

]]> Tue, 09 Oct 2012 17:22:28 +0400